<template>
  <div class="app-container">
    <el-card class="points-card">
      <div class="points-header">
        <h2>作者积分统计</h2>
        <el-button type="primary" @click="refreshPoints">刷新数据</el-button>
      </div>

      <!-- 用户信息 -->
      <div class="user-info" v-if="userInfo">
        <el-avatar :size="64" :src="userInfo.avatar" />
        <div class="user-details">
          <h3>{{ userInfo.username }}</h3>
          <p>邮箱：{{ userInfo.email }}</p>
          <p>手机：{{ userInfo.phone }}</p>
        </div>
      </div>

      <!-- 积分统计 -->
      <div class="points-stats">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-title">订阅积分</div>
              <div class="stat-value">{{ pointsData.tipping || 0 }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-title">月票数量</div>
              <div class="stat-value">{{ pointsData.pass || 0 }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-title">月票积分</div>
              <div class="stat-value">{{ pointsData.passPoints || 0 }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-title">总积分</div>
              <div class="stat-value highlight">{{ pointsData.totalPoints || 0 }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getPointsByUserId } from '@/api/points/points'

export default {
  name: 'WriterPoints',
  data() {
    return {
      userId: this.$route.query.userId,
      pointsData: {
        tipping: 0,
        pass: 0,
        passPoints: 0,
        totalPoints: 0
      },
      userInfo: null
    }
  },
  created() {
    this.getPoints()
  },
  methods: {
    async getPoints() {
      try {
        const response = await getPointsByUserId(this.userId)
        if (response.code === 200) {
          this.pointsData = response.data
          this.userInfo = {
            username: response.data.username,
            avatar: response.data.avatar,
            email: response.data.email,
            phone: response.data.phone
          }
        } else {
          this.$message.error(response.msg || '获取积分信息失败')
        }
      } catch (error) {
        console.error('获取积分信息失败:', error)
        this.$message.error('获取积分信息失败')
      }
    },
    refreshPoints() {
      this.getPoints()
    }
  }
}
</script>

<style lang="scss" scoped>
.points-card {
  margin: 20px;
  .points-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    h2 {
      margin: 0;
      color: #303133;
    }
  }
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 8px;
    .user-details {
      margin-left: 20px;
      h3 {
        margin: 0 0 10px 0;
        color: #303133;
      }
      p {
        margin: 5px 0;
        color: #606266;
      }
    }
  }
  .points-stats {
    .stat-card {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      text-align: center;
      .stat-title {
        color: #606266;
        font-size: 14px;
        margin-bottom: 10px;
      }
      .stat-value {
        font-size: 24px;
        color: #303133;
        font-weight: bold;
        &.highlight {
          color: #409EFF;
        }
      }
    }
  }
}
</style>




